<template>
	<div class="bg-gray-50 min-h-screen font-sans">
		<!-- 顶部导航 -->
		<nav class="bg-blue-600 text-white shadow-md fixed w-full top-0 z-50">
			<div class="container mx-auto px-4">
				<div class="flex justify-center items-center h-16">
					<div class="flex items-center space-x-8">
						<button class="px-6 py-2 text-lg font-medium transition-colors rounded-lg"
							:class="{ 'bg-blue-700': activeSection === 'apply' }" @click="switchSection('apply')">
							志愿者申请
						</button>
						<button class="px-6 py-2 text-lg font-medium transition-colors rounded-lg"
							:class="{ 'bg-blue-700': activeSection === 'my-volunteer' }"
							@click="switchSection('my-volunteer')">
							我的志愿
						</button>
						<button class="px-6 py-2 text-lg font-medium transition-colors rounded-lg"
							:class="{ 'bg-blue-700': activeSection === 'schedule' }" @click="switchSection('schedule')">
							比赛进程
						</button>
						<button @click="tuiChu">退出登录</button>
					</div>
				</div>
			</div>
		</nav>


		<!-- 主内容区域 -->
		<main class="container mx-auto px-4 pt-24 pb-8">
			<!-- 志愿者申请部分 -->
			<section v-show="activeSection === 'apply'" class="mb-8">
				<div class="bg-white rounded-lg shadow-lg p-6">
					<h2 class="text-2xl font-bold mb-6 text-center text-gray-800">志愿者申请</h2>
					<form @submit.prevent="submitVolunteerApplication">
						<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
							<div>
								<label class="block text-gray-700 font-medium mb-2">学号</label>
								<input type="text" v-model="form.studentId"
									class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
									placeholder="请输入学号" required>
							</div>

							<div>
								<label class="block text-gray-700 font-medium mb-2">姓名</label>
								<input type="text" v-model="form.name"
									class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
									placeholder="请输入姓名" required>
							</div>

							<div>
								<label class="block text-gray-700 font-medium mb-2">学院</label>
								<select v-model="form.college"
									class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
									required>
									<option value="">请选择学院</option>
									<option value="计算机学院">计算机学院</option>
									<option value="电子工程学院">电子工程学院</option>
									<option value="机械工程学院">机械工程学院</option>
									<option value="经济管理学院">经济管理学院</option>
									<option value="外国语学院">外国语学院</option>
								</select>
							</div>

							<div>
								<label class="block text-gray-700 font-medium mb-2">班级</label>
								<input type="text" v-model="form.class"
									class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
									placeholder="请输入班级" required>
							</div>

							<div>
								<label class="block text-gray-700 font-medium mb-2">手机号码</label>
								<input type="tel" v-model="form.phone"
									class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
									placeholder="请输入手机号码" required>
							</div>

							<div>
								<label class="block text-gray-700 font-medium mb-2">电子邮箱</label>
								<input type="email" v-model="form.email"
									class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
									placeholder="请输入电子邮箱" required>
							</div>
						</div>

						<div class="mb-6">
							<label class="block text-gray-700 font-medium mb-2">志愿者类型</label>
							<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
								<label v-for="type in volunteerTypes" :key="type"
									class="flex items-center p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-blue-50 transition-colors">
									<input type="radio" :value="type" v-model="form.volunteerType"
										class="form-radio text-blue-600" required />
									<span class="ml-2">{{ type }}</span>
								</label>
							</div>
						</div>

						<div class="mb-6">
							<label class="block text-gray-700 font-medium mb-2">意向服务项目（可多选）</label>
							<div class="grid grid-cols-2 md:grid-cols-3 gap-3">
								<label v-for="event in preferredEvents" :key="event"
									class="flex items-center p-2 border border-gray-300 rounded-lg cursor-pointer hover:bg-blue-50 transition-colors">
									<input type="checkbox" :value="event" v-model="form.preferredEvents"
										class="form-checkbox text-blue-600">
									<span class="ml-2">{{ event }}</span>
								</label>
							</div>
						</div>

						<div class="mb-6">
							<label class="block text-gray-700 font-medium mb-2">可服务时间</label>
							<div class="grid grid-cols-4 md:grid-cols-7 gap-3">
								<label v-for="day in availabilityDays" :key="day"
									class="flex items-center p-2 border border-gray-300 rounded-lg cursor-pointer hover:bg-blue-50 transition-colors">
									<input type="checkbox" :value="day" v-model="form.availability"
										class="form-checkbox text-blue-600">
									<span class="ml-2">{{ day }}</span>
								</label>
							</div>
						</div>

						<div class="mb-6">
							<label class="block text-gray-700 font-medium mb-2">特长或相关经验</label>
							<textarea v-model="form.specialSkills" rows="3"
								class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
								placeholder="请输入您的特长或相关志愿经验（选填）"></textarea>
						</div>

						<div class="flex justify-end space-x-4">
							<button type="button" @click="resetForm"
								class="px-6 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors">
								重置
							</button>
							<button type="submit"
								class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
								提交申请
							</button>
						</div>
					</form>
				</div>
			</section>

			<!-- 我的志愿部分 -->
			<section v-show="activeSection === 'my-volunteer'" class="mb-8">
				<div class="bg-white rounded-lg shadow-lg overflow-hidden">
					<div class="p-4 border-b">
						<div class="flex justify-between items-center">
							<h2 class="text-2xl font-bold text-gray-800">我的志愿</h2>
							<div class="flex space-x-2">
								<input type="text" v-model="searchTerm"
									class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
									placeholder="搜索岗位...">
							</div>
						</div>
					</div>

					<div class="overflow-x-auto">
						<table class="w-full">
							<thead class="bg-gray-50">
								<tr>
									<th
										class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
										ID</th>
									<th
										class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
										项目</th>
									<th
										class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
										岗位</th>
									<th
										class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
										时间</th>
									<th
										class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
										地点</th>
									<th
										class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
										状态</th>
									<th
										class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
										操作</th>
								</tr>
							</thead>
							<tbody class="bg-white divide-y divide-gray-200">
								<tr v-for="application in filteredApplications" :key="application.id"
									class="hover:bg-gray-50 transition-colors">
									<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
										{{ application.id }}</td>
									<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
										{{ application.project }}</td>
									<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
										{{ application.position }}</td>
									<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ application.time }}
									</td>
									<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
										{{ application.location }}</td>
									<td class="px-6 py-4 whitespace-nowrap">
										<span :class="getStatusClass(application.status)"
											class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full">
											{{ application.status }}
										</span>
									</td>
									<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
										<button @click="cancelApplication(application.id)"
											class="text-red-600 hover:text-red-700 transition-colors">
											×取消报名
										</button>
									</td>
								</tr>
							</tbody>
						</table>
					</div>

					<div class="p-4 border-t bg-gray-50">
						<div class="flex justify-between items-center">
							<p class="text-sm text-gray-500">
								显示1-{{ filteredApplications.length }}条，共{{ filteredApplications.length }}条</p>
						</div>
					</div>
				</div>
			</section>

			<!-- 比赛进程部分 -->
			<section v-show="activeSection === 'schedule'">
				<div class="bg-white rounded-lg shadow-lg overflow-hidden">
					<div class="p-4 border-b">
						<h2 class="text-2xl font-bold text-gray-800">比赛进程</h2>
					</div>

					<!-- 日期选择器 -->
					<div class="p-4 border-b">
						<div class="flex overflow-x-auto space-x-2">
							<button v-for="date in dates" :key="date" @click="activeDate = date"
								class="px-4 py-2 rounded-lg whitespace-nowrap transition-colors"
								:class="activeDate === date ? 'bg-blue-600 text-white' : 'bg-gray-100 hover:bg-gray-200'">
								{{ date }}
							</button>
						</div>
					</div>

					<div class="p-4 border-b">
						<div class="flex justify-between items-center">
							<h3 class="text-lg font-semibold text-gray-800">{{ activeDate }}比赛项目</h3>
							<select v-model="sportFilter"
								class="px-3 py-2 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors">
								<option value="all">全部项目</option>
								<option v-for="sport in sports" :key="sport" :value="sport">{{ sport }}</option>
							</select>
						</div>
					</div>

					<div class="overflow-x-auto">
						<table class="w-full">
							<thead class="bg-gray-50">
								<tr>
									<th
										class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
										ID</th>
									<th
										class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
										项目</th>
									<th
										class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
										时间</th>
									<th
										class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
										地点</th>
									<th
										class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
										参赛队伍</th>
									<th
										class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
										状态</th>
									<th
										class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
										操作</th>
								</tr>
							</thead>
							<tbody class="bg-white divide-y divide-gray-200">
								<tr v-for="match in filteredMatches" :key="match.id"
									class="hover:bg-gray-50 transition-colors">
									<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
										{{ match.id }}</td>
									<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ match.name }}</td>
									<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ match.time }}</td>
									<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ match.location }}
									</td>
									<td class="px-6 py-4 text-sm text-gray-500">
										<div v-for="team in match.teams" :key="team">{{ team }}</div>
									</td>
									<td class="px-6 py-4 whitespace-nowrap">
										<span :class="getMatchStatusClass(match.status)"
											class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full">
											{{ match.status }}
										</span>
									</td>
									<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
										<button @click="viewMatchDetails(match.id)"
											class="text-blue-600 hover:text-blue-700 transition-colors">
											查看详情
										</button>
									</td>
								</tr>
							</tbody>
						</table>
					</div>

					<div class="p-4 border-t bg-gray-50">
						<div class="flex justify-between items-center">
							<p class="text-sm text-gray-500">
								显示1-{{ filteredMatches.length }}条，共{{ filteredMatches.length }}条</p>
							<div class="flex space-x-1">
								<button
									class="px-3 py-1 border border-gray-300 rounded text-sm text-gray-500 hover:bg-gray-100 transition-colors">1</button>
								<button
									class="px-3 py-1 border border-gray-300 rounded text-sm text-gray-500 hover:bg-gray-100 transition-colors">2</button>
								<button
									class="px-3 py-1 border border-gray-300 rounded text-sm text-gray-500 hover:bg-gray-100 transition-colors">3</button>
								<button
									class="px-3 py-1 border border-gray-300 rounded text-sm text-gray-500 hover:bg-gray-100 transition-colors">4</button>
								<button
									class="px-3 py-1 border border-gray-300 rounded text-sm text-gray-500 hover:bg-gray-100 transition-colors">5</button>
								<button
									class="px-3 py-1 border border-gray-300 rounded text-sm text-gray-500 hover:bg-gray-100 transition-colors">6</button>
								<button
									class="px-3 py-1 border border-gray-300 rounded text-sm text-gray-500 hover:bg-gray-100 transition-colors">7</button>
							</div>
						</div>
					</div>
				</div>
			</section>
		</main>

		<!-- 模态框 -->
		<div v-if="showModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
			<div class="bg-white rounded-lg max-w-4xl w-full mx-4 overflow-hidden">
				<div class="p-4 border-b flex justify-between items-center">
					<h3 class="text-lg font-bold">比赛详情 - {{ selectedMatch.name }}</h3>
					<button @click="closeModal" class="text-gray-500 hover:text-gray-700">
						×
					</button>
				</div>
				<div class="p-6">
					<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
						<div>
							<p class="text-sm text-gray-500">比赛ID</p>
							<p class="font-medium mb-3">{{ selectedMatch.id }}</p>

							<p class="text-sm text-gray-500">比赛项目</p>
							<p class="font-medium mb-3">{{ selectedMatch.name }}</p>

							<p class="text-sm text-gray-500">比赛时间</p>
							<p class="font-medium mb-3">{{ selectedMatch.time }}</p>

							<p class="text-sm text-gray-500">比赛地点</p>
							<p class="font-medium mb-3">{{ selectedMatch.location }}</p>

							<p class="text-sm text-gray-500">比赛状态</p>
							<p class="font-medium mb-3">{{ selectedMatch.status }}</p>
						</div>
						<div>
							<p class="text-sm text-gray-500">参赛队伍</p>
							<div class="mb-3">
								<p v-for="team in selectedMatch.teams" :key="team" class="font-medium">{{ team }}</p>
							</div>

							<p class="text-sm text-gray-500">裁判信息</p>
							<div class="mb-3">
								<p class="font-medium">主裁判: {{ selectedMatch.referee }}</p>
								<p class="font-medium">助理裁判: {{ selectedMatch.assistantReferees.join(', ') }}</p>
							</div>

							<p class="text-sm text-gray-500">志愿者需求</p>
							<div class="mb-3">
								<div v-for="need in selectedMatch.volunteerNeeds" :key="need.type"
									class="flex justify-between mb-1">
									<span class="font-medium">{{ need.type }}:</span>
									<span>{{ need.count }}人</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="p-4 border-t flex justify-end">
					<button @click="closeModal"
						class="px-6 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors">
						关闭
					</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	import {
		useRouter
	} from 'vue-router'; // useRouter从vue-router导入（路由用）
	const router = useRouter();
	
	//退出登录
	const tuiChu=()=>{
		router.push({name:'total'});
	}

	// 响应式数据
	const activeSection = ref('apply')
	const searchTerm = ref('')
	const sportFilter = ref('all')
	const activeDate = ref('今天')
	const showModal = ref(false)
	const selectedMatch = ref({})

	// 表单数据
	const form = reactive({
		studentId: '',
		name: '',
		college: '',
		class: '',
		phone: '',
		email: '',
		volunteerType: '',
		preferredEvents: [],
		availability: [],
		specialSkills: ''
	})

	// 静态数据
	const volunteerTypes = ['裁判助理', '场地维护', '医疗救护', '计分统计', '引导服务', '检录']
	const preferredEvents = ['田径', '篮球', '足球', '排球', '羽毛球', '乒乓球', '游泳', '体操', '其他项目']
	const availabilityDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
	const dates = ['今天', '10月19日', '10月20日', '10月21日', '10月22日', '10月23日', '10月24日', '10月25日']
	const sports = ['田径', '篮球', '足球', '排球', '羽毛球', '乒乓球']

	// 志愿者申请数据
	const applications = ref([{
			id: 'VOL2023001',
			project: '田径',
			position: '裁判助理',
			time: '2025-10-20 09:00-11:30',
			location: '主体育场',
			status: '已通过'
		},
		{
			id: 'VOL2023002',
			project: '篮球',
			position: '计分统计',
			time: '2025-10-21 14:00-17:00',
			location: '篮球馆',
			status: '审核中'
		}
	])

	// 比赛数据
	const matches = ref([{
			id: 'M2023102001',
			name: '男子100米预赛',
			time: '09:00-10:30',
			location: '主体育场A区',
			teams: ['计算机学院', '电子工程学院', '机械工程学院', '经济管理学院'],
			status: '进行中',
			referee: '张老师',
			assistantReferees: ['李老师', '王老师'],
			volunteerNeeds: [{
					type: '裁判助理',
					count: 2
				},
				{
					type: '计时员',
					count: 3
				},
				{
					type: '场地维护',
					count: 2
				}
			]
		},
		{
			id: 'M2023102002',
			name: '女子400米预赛',
			time: '10:40-12:00',
			location: '主体育场A区',
			teams: ['计算机学院', '外国语学院', '经济管理学院', '人文学院'],
			status: '即将开始',
			referee: '刘老师',
			assistantReferees: ['陈老师', '赵老师'],
			volunteerNeeds: [{
					type: '裁判助理',
					count: 2
				},
				{
					type: '计时员',
					count: 3
				},
				{
					type: '场地维护',
					count: 2
				}
			]
		},
		{
			id: 'M2023102003',
			name: '男子篮球小组赛',
			time: '14:00-15:30',
			location: '篮球馆1号场地',
			teams: ['计算机学院', '机械工程学院'],
			status: '即将开始',
			referee: '孙老师',
			assistantReferees: ['周老师', '吴老师'],
			volunteerNeeds: [{
					type: '计分统计',
					count: 2
				},
				{
					type: '记录员',
					count: 1
				},
				{
					type: '技术台',
					count: 2
				}
			]
		},
		{
			id: 'M2023102004',
			name: '女子排球小组赛',
			time: '16:00-17:30',
			location: '排球馆2号场地',
			teams: ['电子工程学院', '外国语学院'],
			status: '即将开始',
			referee: '郑老师',
			assistantReferees: ['钱老师', '冯老师'],
			volunteerNeeds: [{
					type: '计分统计',
					count: 2
				},
				{
					type: '记录员',
					count: 1
				},
				{
					type: '技术台',
					count: 2
				}
			]
		}
	])

	// 计算属性
	const filteredApplications = computed(() => {
		if (!searchTerm.value) return applications.value
		return applications.value.filter(app =>
			Object.values(app).some(value =>
				String(value).toLowerCase().includes(searchTerm.value.toLowerCase())
			)
		)
	})

	const filteredMatches = computed(() => {
		let filtered = matches.value
		if (sportFilter.value !== 'all') {
			filtered = filtered.filter(match =>
				match.name.toLowerCase().includes(sportFilter.value.toLowerCase())
			)
		}
		return filtered
	})

	// 方法
	const switchSection = (section) => {
		activeSection.value = section
	}

	const submitVolunteerApplication = () => {
		// 志愿者申请提交功能实现
		resetForm()
	}

	const resetForm = () => {
		Object.keys(form).forEach(key => {
			if (Array.isArray(form[key])) {
				form[key] = []
			} else {
				form[key] = ''
			}
		})
	}

	const cancelApplication = (id) => {
		if (confirm(`确定要取消报名 ${id} 吗？`)) {
			applications.value = applications.value.filter(app => app.id !== id)
			// 报名取消功能实现
		}
	}

	const viewMatchDetails = (id) => {
		const match = matches.value.find(m => m.id === id)
		if (match) {
			selectedMatch.value = match
			showModal.value = true
		}
	}

	const closeModal = () => {
		showModal.value = false
		selectedMatch.value = {}
	}

	const getStatusClass = (status) => {
		switch (status) {
			case '已通过':
				return 'bg-green-100 text-green-800'
			case '审核中':
				return 'bg-yellow-100 text-yellow-800'
			default:
				return 'bg-gray-100 text-gray-800'
		}
	}

	const getMatchStatusClass = (status) => {
		switch (status) {
			case '进行中':
				return 'bg-green-100 text-green-800'
			case '即将开始':
				return 'bg-yellow-100 text-yellow-800'
			default:
				return 'bg-gray-100 text-gray-800'
		}
	}
</script>

<style scoped>
	.transition-colors {
		transition: all 0.3s ease;
	}

	input:focus,
	select:focus,
	textarea:focus {
		outline: none;
		border-color: #3b82f6;
		box-shadow: 0 0 0 1px #3b82f6;
	}

	.shadow-lg {
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	}

	@media (max-width: 768px) {
		.container {
			padding-left: 1rem;
			padding-right: 1rem;
		}
	}
</style>